<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <!--Ext and ux styles -->
    <link type="text/css" rel="stylesheet" href="../../../ext-min/resources/css/ext-all.css"/>
    <link href="../../../ext-min/examples/ux/css/Spinner.css" rel="stylesheet" type="text/css" />
    <link href="../../../ext-min/examples/ux/css/LockingGridView.css" rel="stylesheet" type="text/css" />
    
    <!--Gantt styles-->
    <link href="../../css/sch-gantt-all.css" rel="stylesheet" type="text/css" />

    <!--Implementation specific styles-->
    <link href="../../css/examples.css" rel="stylesheet" type="text/css" />
    <link href="css/common.css" rel="stylesheet" type="text/css" />
    <link href="css/style1.css" rel="stylesheet" type="text/css" />
    <link href="css/style2.css" rel="stylesheet" type="text/css" />
    <link href="css/style3.css" rel="stylesheet" type="text/css" />

    <!--Ext lib and UX components-->
    <script type="text/javascript" src="../../../ext-min/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="../../../ext-min/ext-all-debug.js"></script>
    <script type="text/javascript" src="../../../ext-min/examples/ux/LockingGridView.js"></script>
    <script type="text/javascript" src="../../../ext-min/examples/ux/Spinner.js"></script>
    <script type="text/javascript" src="../../../ext-min/examples/ux/SpinnerField.js"></script>

    <!--Gantt components-->
    <script src="../../js/sch-gantt-base-debug.js" type="text/javascript"></script>
    <script src="../../js/sch-gantt-all-debug.js" type="text/javascript"></script>

    <!--Application files-->
    <script src="styles.js" type="text/javascript"></script>

    <title>Gantt styling demo</title>
</head>
<body>
    <p>
        This example shows some different ways to style the chart using just CSS. Click the toolbar buttons to switch styles. NOTE: For this example to work you have to run it in a web server context. 
    </p>
    <p>Note that the js for the example code is not minified so it is readable. See <a href="styles.js">styles.js</a>.</p>
    <div style="display:none">
        <img src="images/bg-lines.gif" />
        <img src="images/transp-1px.png" />
        <img src="images/dependencyarrowdown.png" />
        <img src="images/dependencyarrowleft.png" />
        <img src="images/dependencyarrowright.png" />
        <img src="images/glow-bg.png" />
        <img src="images/halfcircle.png" />
        <img src="images/theme.png" />
    </div>
</body>
</html>
